<%--@elvariable id="flat" type="com.flats.model.entity.Flat"--%>
<%--@elvariable id="commantsDate" type="java.util.Map<java.lang.Long,java.lang.String>"--%>
<%@include file="header.jsp" %>
<%@include file="search.jsp" %>
<link rel="stylesheet" href="<c:url value="/css/flat-details.css" />">
<script type="text/javascript" src="http://www.google.fr/jsapi"></script>
<script type="text/javascript" src="<c:url value="/js/autoresize.jquery.js"/>"></script>
<script type="text/javascript">
    google.load("maps", "3.4", {
        other_params: "sensor=false&language=fr"
    });
</script>
<script type="text/javascript" src="<c:url value="/js/jquery.googlemap.js"/>"></script>
<div class="flat-detail-container">
    <div class="row">
    <div class="flat-img col-lg-6">
        <div id="carousel-example-generic" class="carousel slide">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="<%=request.getContextPath()%>/images/flats_photo/flat6.1.jpg" alt="">
                </div>
                <div class="item">
                    <img src="<%=request.getContextPath()%>/images/flats_photo/flat6.2.jpg" alt="">
                </div>
                <div class="item">
                    <img src="<%=request.getContextPath()%>/images/flats_photo/flat6.3.jpg" alt="">
                </div>
                <div class="item">
                    <img src="<%=request.getContextPath()%>/images/flats_photo/flat6.4.jpg" alt="">
                </div>
                <div class="item">
                    <img src="<%=request.getContextPath()%>/images/flats_photo/flat6.5.jpg" alt="">
                </div>
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="icon-prev"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="icon-next"></span>
            </a>
        </div>
        <!-- carousel end //-->
    </div>

    <div class="col-lg-6 flat-info">
        <span class="price">Price:  <span class="dollars">$${flat.price}</span></span>
        <span class="rating-icons pull-right">
        <span class="rating-val">${flat.rating}</span><img class="img-star"
                                                src="<%=request.getContextPath()%>/images/icon_rating.png"/>
        <span class="btn-like"><img class="img-like" src="<%=request.getContextPath()%>/images/like.png"/></span>
        <span class="btn-dislike"><img class="img-dislike" src="<%=request.getContextPath()%>/images/dislike.png"/></span>
        </span>
        <div class="address">Address: <span>${flat.address.country}, ${flat.address.city}, ${flat.address.street} ${flat.address.build}
            <span class="simple-text">Flat Number:</span> ${flat.address.flatNumber} <span class="simple-text">Floor:</span> ${flat.address.floor}</span></div>
        <div class="table-container">
            <table class="table table-striped">
                <tbody>
                <tr>
                    <td>Number of rooms</td>
                    <td class="val">${flat.numberOfRooms}</td>
                </tr>
                <tr>
                    <td>Area</td>
                    <td class="val">${flat.area}</td>
                </tr>
                <tr>
                    <td>Construction year</td>
                    <td class="val">${flat.constructionYear}</td>
                </tr>
                <tr>
                    <td>Owner</td>
                    <td><a href="<%=request.getContextPath()%>/owner.detail?ownerId=${flat.owner.user.id}">${flat.owner.user.name}</a></td>
                </tr>
                </tbody>
            </table>
        </div>

        <p>${flat.notes}</p>
        <span class="fav pull-right">
            <span>Add to favorites</span>
            <img src="<%=request.getContextPath()%>/images/plus.png" alt="Add to Favorites"/>
        </span>
    </div>
    </div>
    <div class="row map-con"><div id="map"></div></div>
    <div class="row comments-container">
        <span class="comments">Comments</span>
        <div class="input-comment">
            <textarea></textarea>
        </div>
        <button type="button" class="btn btn-primary add-comment-btn">Add comment</button>
        <ul>

            <%--<c:forEach var="comment" items="${flat.comments}">--%>
                <%--<li>--%>
                    <%--<div class="name pull-left">--%>
                        <%--${comment.user.name}--%>
                    <%--</div >--%>
                    <%--<div class="c_date">--%>
                        <%--${commantsDate[comment.id]}--%>
                    <%--</div>--%>
                    <%--<div class="message">--%>
                            <%--${comment.text}--%>
                    <%--</div>--%>
                <%--</li>--%>
            <%--</c:forEach>--%>
                <%@include file="comments.jsp" %>
            <%--<jsp:include page="comments.jsp"/>--%>

        </ul>
    </div>
</div>
<script>
    (function ($) {
        $(function () {
            $('.carousel').carousel();
            var $rating=$('.rating-val');
            var rating_val=$rating.text();
            var dislike_count=0;
            var like_count=0;
            $('textarea').autoResize();
            $('.btn-like').on('click',function(){
                ++like_count;
                console.log("like_count",like_count);
                console.log("dislike_count",dislike_count);
                if(dislike_count==0){
                    $rating.html(++rating_val);
                    $(this).css("visibility","hidden");
                    $('.btn-dislike').css("visibility","visible");
                }else if(dislike_count==1 && like_count<2){
                    $rating.html(++rating_val);
                }else if(dislike_count==1 && like_count==2){
                    $rating.html(++rating_val);
                    $(this).css("visibility","hidden");
                    $('.btn-dislike').css("visibility","visible");
                    like_count=1;
                }
            });
            $('.btn-dislike').on('click',function(){
                ++dislike_count;
                console.log("dislike_count",dislike_count);
                console.log("like_count",like_count);
                if(like_count==0){
                    $rating.html(--rating_val);
                    $(this).css("visibility","hidden");
                    $('.btn-like').css("visibility","visible");
                }else if(like_count==1 && dislike_count<2){
                    $rating.html(--rating_val);
                }else if(like_count==1 && dislike_count==2){
                    $rating.html(--rating_val);
                    $(this).css("visibility","hidden");
                    $('.btn-like').css("visibility","visible");
                    dislike_count=1;
                }
            });
            $("#map").googleMap().addMarker({
                address: "6 ulitsa Gradinskaya, Kyiv", // Postale Address
                url: 'http://www.tilobog.com' // Link
            });
            $('.add-comment-btn').on('click',function(){
                 var comment_text = $('textarea').val();
                $('textarea').val('');
                var dNow = new Date();
                 var localdate= (strpad00(dNow.getDate()) + '/' + strpad00(dNow.getMonth()+1) + '/'
                        + dNow.getFullYear() + ' ' + strpad00(dNow.getHours()) + ':' + strpad00(dNow.getMinutes())
                        +':'+strpad00(dNow.getSeconds()));

                console.log("localdate = ",localdate);
                $.ajax({
                   url:"comment.add",
                   data:"comment="+comment_text+"&flatId="+"${flat.id}"+"&date="+localdate
                    ,success:function(data){
                      $('.comments-container ul').html(data);
                    }
                });
            });
            function strpad00(s)
            {
                s = s + '';
                if (s.length === 1) s = '0'+s;
                return s;
            }
        });
    })(jQuery);
</script>
